<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>在线交流</title>
  <style>
    #message{
      margin-top:40px;
      border:1px solid gray;
              padding:20px;
    }
  </style>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- Custom styles for this template -->
    <link href="css/dashboard.css" rel="stylesheet">
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3"> 员工信息管理系统

    </a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <div class="navbar-nav">
        <div class="nav-item text-nowrap">
            <a class="nav-link px-3"  href="/ems-thymeleaf/log" >Sign out</a>
        </div>
    </div>
</header>

<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link "
                           aria-current="page" href="/ems-thymeleaf/index">
                            <span data-feather="home"></span>
                            Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link"
                           aria-current="page"
                           href="/ems-thymeleaf/employee/findByPage">
                            <span data-feather="file"></span>
                            员工信息管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link "
                           aria-current="page"
                           href="/ems-thymeleaf/user/findByPage">
                            <span data-feather="user"></span>
                            hr信息管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/ems-thymeleaf/webSocketTest.html"
                           aria-current="page">
                            <span data-feather="bar-chart-2"></span>
                            测试聊天室
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="bar-chart-2"></span>
                            Reports
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <span data-feather="layers"></span>
                            Integrations
                        </a>
                    </li>
                </ul>

            </div>
            </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <h2>在线聊天页面</h2>
            <br>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
        <!-- <a href="/ems-thymeleaf/index">退出聊天室</a>-->
        昵称:<input type="text" id="nickname" placeholder="请输入用户名"/>

        <button onclick="conectWebSocket()">连接WebSocket</button>
        <button onclick="closeWebSocket()">断开连接</button>
        <hr />
        <br />
        消息：<input id="text" type="text" />
        频道号:<input id="toUser" type="text" />
        <button onclick="send()">发送消息</button>
        <div id="message">消息记录:</div>

            </table>
        </div>
        </main>
    </div>
</div>
    </body>
<!---->
          <script type="text/javascript">
              var websocket = null;

            function conectWebSocket(){
              //判断当前浏览器是否支持WebSocket
                var nickname = document.getElementById("nickname").value;
                if(nickname===""){
                    alert("请输入昵称");
                    return;
                }
              if ('WebSocket'in window) {
                websocket = new WebSocket("ws://localhost:9999/ems-thymeleaf/websocket/" + nickname);
              } else {
                alert('Not support websocket')
              }
              //连接发生错误的回调方法
              websocket.onerror = function() {
                setMessageInnerHTML("error");
              };
              //连接成功建立的回调方法
              websocket.onopen = function(event) {
                  var nickname = document.getElementById("nickname").value;
                  if(nickname===""){
                      alert("请输入昵称");
                      return;
                  }
                setMessageInnerHTML("Loc MSG: 成功建立连接");
              }
              //接收到消息的回调方法
              websocket.onmessage = function(event) {
                setMessageInnerHTML(event.data);
              }
              //连接关闭的回调方法
              websocket.onclose = function() {
                setMessageInnerHTML("Loc MSG:关闭连接");
              }
              //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
              window.onbeforeunload = function() {
                websocket.close();
              }
            }
            //将消息显示在网页上
            function setMessageInnerHTML(innerHTML) {
              document.getElementById('message').innerHTML += innerHTML + '<br/>';
            }
            //关闭连接
            function closeWebSocket() {
              websocket.close();
            }
            //发送消息
            function send() {
              var message = document.getElementById('text').value;
              var toUser = document.getElementById('toUser').value;
              var  socketMsg = {msg: message,toUser:toUser};
              if (toUser == ''){
                  //群聊
                  socketMsg.type = 0;
              }else {
                  //单聊
                  socketMsg.type = 1;
              }
              websocket.send(JSON.stringify(socketMsg));
            }
          </script>
          </html>
